import { memo } from "react";
import {
  SongsCoverWrapped
} from "./style"

function HSongsCover (props) {
  const { data , Key , imgURL , text ,playCount } = props;

  function playCountFormat ( playCount) {
  if ( playCount > 10000 ) {
      const strCount = playCount.toString();
      const length = strCount.length - 4;
     return  strCount.substr(0,length)+"万";
    }
  return false;
  }

  return (
    <SongsCoverWrapped>
      {
        data.map((item)=>{
          return (
            <li key={item[Key]} className={"hot-item-wrap"}>
              <div className={"hot-item"}>
                <img src={`${item[imgURL]}?param=140y140`} alt={"热门推荐"}/>
                <a className={"sprite_cover"} href=""/>
                <div className="item-bottom sprite_cover">
                  <span className="listen-icon sprite_icon"></span>
                  <span className="play-count">{playCountFormat(item[playCount])||item[playCount]}</span>
                  <a className={"play-music sprite_icon"} href=""></a>
                </div>
              </div>
              <p><a className={"hot-item-text"} href="">{item[text]}</a></p>
            </li>
          )
        })
      }
    </SongsCoverWrapped>
  )
}

export default memo(HSongsCover);
